/*侧滑栏*/
html, body {
			position: relative;
			height: 100%;
		}
		body {
			background: #eee;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #000;
			margin: 0;
			padding: 0;
		}
		.swiper-container {
			width: 100%;
			height: 100%;
		}
		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
			

			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
		.menu {
			min-width: 100px;
			width: 70%;
			max-width: 360px;

			background-color: #2C8DFB;
			color: #fff;
		}
		.content {
			width: 100%;
		}

		.menu-button {
			position: absolute;
			top: 0px; left: 0px;

			padding: 15px;

			cursor: pointer;

			-webkit-transition: .3s;
			transition: .3s;

			background-color: #2C8DFB;

			/*margin: 14px;
			border-radius: 5px;*/
		}
		.menu-button .bar:nth-of-type(1) {
			margin-top: 0px;
		}
		.menu-button .bar:nth-of-type(3) {
			margin-bottom: 0px;
		}

		.bar {
			position: relative;
			display: block;

			width: 50px;
			height: 5px;

			margin: 10px auto;
			background-color: #fff;

			border-radius: 10px;

			-webkit-transition: .3s;
			transition: .3s;
		}

		.menu-button:hover .bar:nth-of-type(1) {
			-webkit-transform: translateY(1.5px) rotate(-4.5deg);
			-ms-transform: translateY(1.5px) rotate(-4.5deg);
			transform: translateY(1.5px) rotate(-4.5deg);
		}
		.menu-button:hover .bar:nth-of-type(2) {
			opacity: .9;
		}
		.menu-button:hover .bar:nth-of-type(3) {
			-webkit-transform: translateY(-1.5px) rotate(4.5deg);
			-ms-transform: translateY(-1.5px) rotate(4.5deg);
			transform: translateY(-1.5px) rotate(4.5deg);
		}

		.cross .bar:nth-of-type(1) {
			-webkit-transform: translateY(15px) rotate(-45deg);
			-ms-transform: translateY(15px) rotate(-45deg);
			transform: translateY(15px) rotate(-45deg);
		}
		.cross .bar:nth-of-type(2) {
			opacity: 0;
		}
		.cross .bar:nth-of-type(3) {
			-webkit-transform: translateY(-15px) rotate(45deg);
			-ms-transform: translateY(-15px) rotate(45deg);
			transform: translateY(-15px) rotate(45deg);
		}
		.cross:hover .bar:nth-of-type(1) {
			-webkit-transform: translateY(13.5px) rotate(-40.5deg);
			-ms-transform: translateY(13.5px) rotate(-40.5deg);
			transform: translateY(13.5px) rotate(-40.5deg);
		}
		.cross:hover .bar:nth-of-type(2) {
			opacity: .1;
		}
		.cross:hover .bar:nth-of-type(3) {
			-webkit-transform: translateY(-13.5px) rotate(40.5deg);
			-ms-transform: translateY(-13.5px) rotate(40.5deg);
			transform: translateY(-13.5px) rotate(40.5deg);
		}
		
#logina{
	background: url(../img/loginback.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
#login,#login2,#login3{
	display: inline-block;
}
#login{
	height: 700px;
	width: 700px;
	background: url(../img/laminate.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
	text-align: left;
	z-index: 5;
}
#login1{
	width: 500px;
	height: 500px;
	margin-top: 220px;
	margin-left: 220px;
	color: #1296db;
}
#login1 p{
	margin-top: 10px;
}
#account,#password,#password2{
	margin-top: 20px;
}
#account input,#password input, #password2 input{
	outline: none;
	border: none;
	border-bottom: 1px solid gainsboro; 
	width: 260px;
	height: 30px;
}
#denglu{
	width: 150px;
	height: 30px;
	margin-top: 20px;
	margin-left: 60px;
	border: none;
	border-radius: 5px;
	background: #1296db;
	color: white;
}
.header{
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0px;
	/*z-index: 1;*/
}


/*头像*/
#ninelogo{
	width: 100%;
	height: 520px;
	margin-top: 20px;
}
#ninelogo img{
	width: 70px;
	height: 70px;
	border-radius: 10px;
}
#ninelogo img:hover{
	animation: animate 1s linear infinite;
}

/*中间内容*/
#herf{
	width:100%;
	height: 400px;
	margin-top:70px;
}
#href a{
	width: 100%;
	height: 50px;
	margin-right: 40px;
	display: block;
	margin-top: 40px;
	background: rgba(255, 255, 255, 0.8);
	line-height: 50px;
	text-align: center;
	color: #000000;
}


/*时间*/
#datetime{
	width: 100%;
	height: 50px;
	margin-top: 60px;
	text-align: center;
}
#datetime div{
	float: left;
}
#date{
	margin-left: 20px;
}
#time{
	margin-top: -2px;
	margin-left: 120px;
}


/*头像旋转动画*/
@keyframes animate{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(-360deg);
	}
	100%{
		transform: rotate(0deg);
	}
}
